<template>
  <div id="main" :class="isShow == true ? 'fixed' : ''">
    <Header title="喵喵影院" />
    <div id="content">
      <div style="z-index: 100">
        <div class="cinema_menu">
          <div
            class="city_switch"
            @click="ifShow(0)"
            :style="regionShow == true ? 'color:red' : ''"
          >
            {{ cinemaVal.regionName == "" ? "全城" : cinemaVal.regionName }}
            <i class="iconfont icon-lower-triangle"></i>
          </div>
          <div
            class="brand_swtich"
            @click="ifShow(1)"
            :style="brandShow == true ? 'color:red' : ''"
          >
            {{ cinemaVal.brandName == "" ? "品牌" : cinemaVal.brandName }}
            <i class="iconfont icon-lower-triangle"></i>
          </div>
          <div
            class="feature_switch"
            @click="ifShow(2)"
            :style="
              specialShow == true || cinemaVal.specialName ? 'color:red' : ''
            "
          >
            {{ cinemaVal.specialName == "" ? "特色" : cinemaVal.specialName }}
            <i class="iconfont icon-lower-triangle"></i>
          </div>
        </div>
        <div class="close-tab" :v-if="isShow">
          <div class="tab-content">
            <Special
              v-if="specialShow"
              :visible="specialShow"
              :hallType="hallType"
              :service="service"
              :cinemaVal="cinemaVal"
            />
            <Brand
              v-if="brandShow"
              :visible="brandShow"
              :brand="brand"
              :cinemaVal="cinemaVal"
            />
            <Region
              v-if="regionShow"
              :visible="specialShow"
              :district="district"
              :subway="subway"
              :cinemaVal="cinemaVal"
            />
          </div>
        </div>
      </div>
      <div class="blacker"></div>
      <Clist :cinemaVal="cinemaVal" />
    </div>
    <TabBar />
  </div>
</template>

<script>
import Header from "@/components/Header";
import TabBar from "@/components/TabBar";
import Clist from "@/components/Clist";
import Special from "@/components/Special";
import Brand from "@/components/Brand";
import Region from "@/components/Region";

export default {
  name: "Cinema",
  components: {
    Header,
    TabBar,
    Clist,
    Special,
    Brand,
    Region,
  },
  data() {
    return {
      specialShow: false,
      brandShow: false,
      regionShow: false,
      isShow: false,
      hallType: {},
      service: {},
      brand: {},
      district: {},
      subway: {},
      cinemaVal: {
        isLoad: true,
        hallTypeId: -1,
        serviceId: -1,
        brandId: -1,
        cityId: 1,
        districtId: -1,
        areaId:-1,
        lineId: -1,
        stationId:-1,
        RegionIndex:0,
        specialName: "",
        brandName: "",
        regionName: "",
      },
    };
  },
  watch: {
    cinemaVal: {
      deep: true,
      handler: function (newVal, oldVal) {
        this.isShow =
          this.specialShow =
          this.brandShow =
          this.regionShow =
            false;
      },
    },
  },
  mounted() {
    this.cinemaVal.cityId = this.$store.state.city.id;
    this.axios
      .get("/ajax/ajax/filterCinemas?ci=" + this.cinemaVal.cityId)
      .then((res) => {
        console.log(res);
        if (res.statusText == "OK") {
          this.hallType = res.data.hallType;
          this.service = res.data.service;
          this.brand = res.data.brand;
          this.district = res.data.district;
          this.subway = res.data.subway;
        }
      });
  },
  methods: {
    ifShow(num) {
      if (this.isShow == true) {
        this.isShow =
          this.specialShow =
          this.brandShow =
          this.regionShow =
            false;
        return;
      }
      this.isShow = true;
      this.specialShow = this.brandShow = this.regionShow = false;
      if (num == 0) {
        this.regionShow = true;
      } else if (num == 1) {
        this.brandShow = true;
      } else {
        this.specialShow = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.fixed {
  height: 100%;
  overflow: hidden;
  .blacker {
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
}
.close-tab {
  position: relative;
  width: 100%;
  background: #fff;
  z-index: 100;
  //   overflow: overlay;
  .tab-content {
    font-size: 15px;
  }
}
#content {
  .cinema_menu {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
  }
}
</style>